<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' ,scrollable:false }">
  <ng-container *ngIf="data.entityDisplayName || entityDisplayName">
    <ng-template #abpHeader>
      <h4>
        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
        {{ entityDisplayName || data.entityDisplayName }}
      </h4>
    </ng-template>
    <ng-template #abpBody>
      <div class="row">
        <div class="col-md-4 scroll-in-modal">
          <div class="form-check mb-2">
            <input
              #selectAllInAllTabsRef
              type="checkbox"
              id="select-all-in-all-tabs"
              name="select-all-in-all-tabs"
              class="form-check-input"
              [(ngModel)]="selectAllTab"
              (click)="onClickSelectAll()"
              [disabled]="disabledSelectAllInAllTabs"
            />
            <label class="form-check-label" for="select-all-in-all-tabs">{{
              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
            }}</label>
          </div>

          <hr class="mt-2 mb-2" />
          <div class="overflow-auto">
            <ul class="nav nav-pills flex-column">
              <li *ngFor="let group of data.groups; trackBy: trackByFn" class="nav-item">
                <a
                  *ngIf="{ assignedCount: getAssignedCount(group.name) } as count"
                  class="nav-link pointer"
                  [class.active]="selectedGroup?.name === group?.name"
                  (click)="onChangeGroup(group)"
                  (select)="setDisabled(group.permissions)"
                >
                  <div [class.font-weight-bold]="count.assignedCount">
                    {{ group?.displayName }}
                    <span *ngIf="count.assignedCount > 0">({{ count.assignedCount }})</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
         </div>

        <div class="col-md-8 scroll-in-modal">
          <div class="ps-1">
            <div class="form-check mb-2">
              <input
                #selectAllInThisTabsRef
                type="checkbox"
                id="select-all-in-this-tabs"
                name="select-all-in-this-tabs"
                class="form-check-input"
                [(ngModel)]="selectThisTab"
                [disabled]="disableSelectAllTab"
                (click)="onClickSelectThisTab()"
              />
              <label class="form-check-label" for="select-all-in-this-tabs">{{
                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
              }}</label>
            </div>
            <hr class="my-2" />
            <div
              *ngFor="let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn"
              [ngStyle]="permission.style"
              class="form-check mb-2"
            >
              <input
                #permissionCheckbox
                type="checkbox"
                [checked]="getChecked(permission.name)"
                [value]="getChecked(permission.name)"
                [attr.id]="permission.name"
                class="form-check-input"
                [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
                (click)="onClickCheckbox(permission, permissionCheckbox.value)"
              />
              <label class="form-check-label" [attr.for]="permission.name"
                >{{ permission.displayName }}
                <ng-container *ngIf="!hideBadges">
                  <span
                    *ngFor="let provider of permission.grantedProviders"
                    class="badge bg-light text-dark"
                    >{{ provider.providerName }}: {{ provider.providerKey }}</span
                  >
                </ng-container>
              </label>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
    <ng-template #abpFooter>
      <button type="button" class="btn btn-outline-primary" abpClose>
        {{ 'AbpIdentity::Cancel' | abpLocalization }}
      </button>
      <abp-button iconClass="fa fa-check" (click)="submit()">{{
        'AbpIdentity::Save' | abpLocalization
      }}</abp-button>
    </ng-template>
  </ng-container>
</abp-modal>
